<template>
  <div>
    <div style="margin: 10px 0">
      <el-input
        placeholder="请输入内容"
        style="width: 200px"
        v-model="name"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="margin: 10px"
        @click="findname"
        >搜索</el-button
      >
      <el-button
        type="info"
        icon="el-icon-remove-outline"
        style="margin: 10px"
        @click="reset"
        >重置</el-button
      >
    </div>
    <div style="margin: 10px 0">
      <el-button type="primary" icon="el-icon-search" @click="add"
        >新增</el-button
      >
      <el-button type="success" icon="el-icon-circle-check" @click="exp"
        >批量导出</el-button
      >
      <el-upload
        action="'http://'++':8081/menu/import'"
        :show-file-list="false"
        :on-change="importSuccess"
        accept="xlsx"
        style="margin-left: 10px; display: inline-block"
      >
        <el-button type="warning" icon="el-icon-circle-close"
          >批量导入</el-button
        >
      </el-upload>
    </div>
    <el-table :data="menuData" row-key="id" default-expand-all>
      <el-table-column prop="id" label="id" width="140" align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="菜单名"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column prop="path" label="真实路径" width="140" align="center">
      </el-table-column>
      <el-table-column
        prop="pagePath"
        label="页面路径"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="icon"
        label="图标"
        label-class-name="font1"
        class-name="font1"
        align="center"
      >
        <template slot-scope="scope">
          <i :class="scope.row.icon"> {{ scope.row.icon }}</i>
        </template>
      </el-table-column>
      <el-table-column
        prop="descrptyion"
        label="描述"
        width="140"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="editMenu(scope.row.id)"
            v-if="!scope.row.pid"
            >新增菜单</el-button
          >
          <el-button type="success" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增菜单" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px">
        <el-form-item label="菜单名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面路径">
          <el-input v-model="form.pagePath" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实路径">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-select
            v-model="form.icon"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
              <i :class="item.value"></i> {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import { serverIp } from '@/utils/config';
export default {
  data() {
    return {
      serverIp:serverIp,
      menuData: [],
      form: {},
      name: "",
      dialogFormVisible: false,
      options: [],
    };
  },
  methods: {
    load() {
      this.request.get("/menu").then((res) => {
        this.menuData = res.data;
      });
    },
    handleNodeClick() {},
    editMenu(pid) {
      this.form = {};
      request.get("/menu/icon").then((res) => {
        this.options = res.data;
      });
      this.dialogFormVisible = true;
      this.form.pid = pid;
    },
    findname() {
      this.load();
    },
    add() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    edit(row) {
      request.get("/menu/icon").then((res) => {
        this.options = res.data;
      });
      this.form = row;
      this.dialogFormVisible = true;
      
    },
    reset() {
      this.name = "";
    },
    exp() {
      window.open('http://'+serverIp+':8081/menu/export');
    },
    importSuccess() {
      this.$message.success("传入成功");
      this.load();
    },
    deleteById(id) {
      request.delete("/menu/" + id).then((res) => {
        if (res) {
          this.$message.success("成功");
          this.$message.success("重新登录生效")
        } else {
          this.$message.error("失败");
        }
        this.dialogFormVisible = false;
        this.load();
      });
    },
    save() {
      this.request.post("/menu/save", this.form).then((res) => {
        if (res) {
          this.$message.success("成功");
          this.$message.success("重新登录生效")
        } else {
          this.$message.error("失败");
        }
        this.dialogFormVisible = false;
        this.load();
      });
    },
  },
  created() {
    //请求分页数据
    this.load();
  },
};
</script>
<style scoped>
.up {
  margin-left: 10px;
}
</style>